<template>
  <div class="item-table">
    <n-data-table
      :columns="columns"
      :data="items"
      :loading="loading"
      :pagination="false"
      :bordered="false"
      :row-class-name="rowClassName"
      @update:sorter="handleSorterChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { h, defineProps, defineEmits, computed } from 'vue'
import { NTag, NText, NImage, NEllipsis } from 'naive-ui'
import type { Item } from '@/types/items'
import type { DataTableColumns } from 'naive-ui'

const props = defineProps<{
  items: Item[]
  loading: boolean
}>()

const emit = defineEmits<{
  (e: 'row-click', item: Item): void
  (e: 'sort-change', sortInfo: { key: string, order: 'ascend' | 'descend' | false }): void
}>()

// 格式化价格
const formatPrice = (price: number) => {
  return price ? `¥${price.toFixed(2)}` : '¥0.00'
}

// 格式化价格变化
const formatPriceChange = (change: number) => {
  if (!change) return '0.00'
  const sign = change > 0 ? '+' : ''
  return `${sign}${change.toFixed(2)}`
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 格式化等级
const formatGrade = (grade: number) => {
  return `等级${grade}`
}

// 获取等级标签类型
const getGradeType = (grade: number): "info" | "default" | "error" | "success" | "primary" | "warning" => {
  const types: Record<number, "info" | "default" | "error" | "success" | "primary" | "warning"> = {
    1: 'default',
    2: 'info',
    3: 'success',
    4: 'warning',
    5: 'error'
  }
  return types[grade] || 'default'
}

// 获取价格变化类型
const getPriceChangeType = (change: number) => {
  if (!change || change === 0) return 'default'
  return change > 0 ? 'error' : 'success'
}

// 表格列定义
const columns = computed<DataTableColumns<Item>>(() => [
  {
    title: '图片',
    key: 'pic',
    width: 80,
    render(row) {
      return h(NImage, {
        src: row.pic,
        width: 40,
        height: 40,
        objectFit: 'contain',
        showToolbarTooltip: true,
        alt: row.object_name
      })
    }
  },
  {
    title: '物品名称',
    key: 'object_name',
    render(row) {
      return h(NEllipsis, {
        tooltip: true,
        lineClamp: 1
      }, { default: () => row.object_name })
    }
  },
  {
    title: '等级',
    key: 'grade',
    width: 100,
    render(row) {
      return h(NTag, {
        type: getGradeType(row.grade),
        size: 'small',
        round: true
      }, { default: () => formatGrade(row.grade) })
    },
    sorter: true
  },
  {
    title: '当前价格',
    key: 'price',
    width: 120,
    sorter: true,
    sortOrder: false,
    render(row) {
      return h(NText, {
        strong: true
      }, { default: () => formatPrice(row.price_change.price) })
    }
  },
  {
    title: '24小时变化',
    key: 'price_24h_ago',
    width: 120,
    render(row) {
      return h(NText, {
        type: getPriceChangeType(row.price_24h_ago)
      }, { default: () => formatPriceChange(row.price_24h_ago) })
    },
    sorter: true
  },
  {
    title: '更新时间',
    key: 'update_time',
    width: 160,
    render(row) {
      return formatDate(row.update_time)
    }
  }
])

// 行样式
const rowClassName = () => {
  return 'item-table-row'
}

// 排序变更处理
const handleSorterChange = (sorter: any) => {
  if (!sorter) return
  
  let key = ''
  let order: 'ascend' | 'descend' | false = false
  
  if (Array.isArray(sorter)) {
    // 多列排序
    const firstSorter = sorter[0]
    if (firstSorter) {
      key = firstSorter.columnKey
      order = firstSorter.order
    }
  } else {
    // 单列排序
    key = sorter.columnKey
    order = sorter.order
  }
  
  emit('sort-change', { key, order })
}
</script>

<style scoped>
.item-table {
  width: 100%;
}

:deep(.item-table-row) {
  cursor: pointer;
  transition: background-color 0.3s;
}

:deep(.item-table-row:hover) {
  background-color: var(--n-table-color-striped);
}
</style> 